<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>{{ title }}</title>
</head>

<body>

<!-- title -->
<h1>{{ title }}</h1>

<hr/>

<h3>Welcome to Inventorier!</h3>

<hr/>

<div id="user"></div>

<script type="text/javascript">
function update_user_box() {
	var user_box = document.getElementById("user");
	// add in some XFBML. note that we set useyou=false so it doesn't display "you"
	user_box.innerHTML =
		"<span>"
		+ "<fb:profile-pic uid=loggedinuser facebook-logo=true></fb:profile-pic>"
		+ "Welcome, <fb:name uid=loggedinuser useyou=false></fb:name>. You are signed in with your Facebook account."
		+ "</span>";
		// TODO: add logout button
	// because this is XFBML, we need to tell Facebook to re-process the document
	FB.XFBML.Host.parseDomTree();
	}
function render_login_button() {
	var user_box = document.getElementById("user");
	// add in some XFBML. note that we set useyou=false so it doesn't display "you"
	user_box.innerHTML =
		"<span>"
		+ "<fb:login-button onlogin=\"update_user_box();\"></fb:login-button>"
		+ "</span>";
	// because this is XFBML, we need to tell Facebook to re-process the document
	FB.XFBML.Host.parseDomTree();
	}
</script> 

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>

<script type="text/javascript">FB.init("{{api_key}}","/static/xd_receiver.htm",{"ifUserConnected" : update_user_box, "ifUserNotConnected" : render_login_button});</script> 

<form action="/search" method="get">
<input type="text" name="upc"/>
<input type="submit"/>
</form>

</body>

</html>
